<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格(孟凡铭)</title>
    <script type="text/javascript">

            var addHero = function () {
                if (num.value==="" || nameS.value==="" || job.value===""){
                    return;
                }
                var newString = "<tr><td>" + +num.value+ "</td><td>" + nameS.value + "</td><td>" + job.value + "</td><td>"+ "<a href='javascript:void(0)' onclick='deleteData(this)'> 删除 </a>" + "</td></tr>"

                //获取table对象 table是一个数组table[0] 是获取到的第一个table元素
                var table = document.getElementsByTagName("table");

                table[0].innerHTML = table[0].innerHTML + newString;

        }

        
        function deleteData(e) {
            var tr = e.parentNode.parentNode;
            var table = e.parentNode.parentNode.parentNode;

            table.removeChild(tr);
        }
    </script>
    
    <style>
        input{
            width: 160px;
            height: 20px;
        }

        #submit{
            width: auto;
            height: auto;
        }


        table{
            border: 1px solid;
            width: 600px;
            text-align: center;
        }

        tr{
            width: 150px;
            height: 25px;
        }

        td,th{
            border: 1px solid;
        }
    </style>
</head>
<body>
    <input type="text" id="num" value="" placeholder="请输入id">
    <input type="text" id="nameS" value="" placeholder="请输入名称">
    <input type="text" id="job" value="" placeholder="请输入职业">
    <input type="submit" value="增加" id="submit" onclick="addHero()">

    <table cellspacing="0px" id = "tableA">
        <caption>游戏数据</caption>
        <tbody>
        <tr>
            <th>编号</th>
            <th>名称</th>
            <th>类型</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>戏命师</td>
            <td>adc</td>
            <td><a href="javascript:void(0)" onclick="deleteData(this)">删除</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>未来守护者</td>
            <td>上单</td>
            <td><a href="javascript:void(0)" onclick="deleteData(this)">删除</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>诡术妖姬</td>
            <td>中单</td>
            <td><a href="javascript:void(0)" onclick="deleteData(this)">删除</a></td>
        </tr>

        </tbody>
    </table>


</body>
</html>